import { computed, defineComponent, ref } from 'vue';
import Accordion from './Accordion.vue';
import Basic from './Basic.vue';
import Dark from './Dark.vue';
import DenseTree from './DenseTree.vue';
import FilterCustom from './FilterCustom.vue';
import FilterDefault from './FilterDefault.vue';
import LazyLoad from './LazyLoad.vue';
import NoConnectors from './NoConnectors.vue';
import Selectable from './Selectable.vue';
import SlotsCustomized from './SlotsCustomized.vue';
import SlotsDefault from './SlotsDefault.vue';
import Splitter from './Splitter.vue';
import Sync from './Sync.vue';
import TickStrategy from './TickStrategy.vue';

export default defineComponent({
  name: 'App',
  props: {},
  emits: [],

  setup(props, { attrs, emit, expose, slots }) {
    expose({});

    return () => {
      return (
        <div class='block'>
          <div class='block-'>
            <h5 class='title'>Accordion</h5>
            <Accordion />
          </div>
          <div class='block-'>
            <h5 class='title'>Basic</h5>
            <Basic />
          </div>
          <div class='block-'>
            <h5 class='title'>Dark</h5>
            <Dark />
          </div>
          <div class='block-'>
            <h5 class='title'>DenseTree</h5>
            <DenseTree />
          </div>
          <div class='block-'>
            <h5 class='title'>FilterCustom</h5>
            <FilterCustom />
          </div>
          <div class='block-'>
            <h5 class='title'>FilterDefault</h5>
            <FilterDefault />
          </div>
          <div class='block-'>
            <h5 class='title'>LazyLoad</h5>
            <LazyLoad />
          </div>
          <div class='block-'>
            <h5 class='title'>NoConnectors</h5>
            <NoConnectors />
          </div>
          <div class='block-'>
            <h5 class='title'>Selectable</h5>
            <Selectable />
          </div>
          <div class='block-'>
            <h5 class='title'>SlotsCustomized</h5>
            <SlotsCustomized />
          </div>
          <div class='block-'>
            <h5 class='title'>SlotsDefault</h5>
            <SlotsDefault />
          </div>
          <div class='block-'>
            <h5 class='title'>Splitter</h5>
            <Splitter />
          </div>
          <div class='block-'>
            <h5 class='title'>Sync</h5>
            <Sync />
          </div>
          <div class='block-'>
            <h5 class='title'>TickStrategy</h5>
            <TickStrategy />
          </div>
        </div>
      );
    };
  },
});
